﻿<phone:PhoneApplicationPage
    x:Class="DnD.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False"
     Style="{StaticResource TransitionPageStyle}">
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar Mode="Minimized" Opacity="0.5" IsMenuEnabled="False" IsVisible="True">

            <shell:ApplicationBarIconButton Click="AppBar_Click" IconUri="/Assets/Icons/laugh.png" Text="profile" />
            <shell:ApplicationBarIconButton Click="AppBar_Click" IconUri="/Assets/Icons/folder.png" Text="browse" />

            

        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">

        <!-- LOCALIZATION NOTE:
            To localize the displayed strings copy their values to appropriately named
            keys in the app's neutral language resource file (AppResources.resx) then
            replace the hard-coded text value between the attributes' quotation marks
            with the binding clause whose path points to that string name.

            For example:

                Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"

            This binding points to the template's string resource named "ApplicationTitle".

            Adding supported languages in the Project Properties tab will create a
            new resx file per language that can carry the translated values of your
            UI strings. The binding in these examples will cause the value of the
            attributes to be drawn from the .resx file that matches the
            CurrentUICulture of the app at run time.
         -->

         <!--Panorama control-->
        <phone:Panorama Title="Massive! Extreme! Alcoholic! Destruction!" Background="{Binding BackgroundBrush}">
            <!--<phone:Panorama.Background>
                <ImageBrush ImageSource="{Binding  BackGroundImageSource}"/>
            </phone:Panorama.Background>-->

            <!--Panorama item one-->
            <phone:PanoramaItem Header="Play">
                <!--Single line list with text wrapping-->
                <!--<phone:LongListSelector Margin="0,0,-22,0" ItemsSource="{Binding Cards}" SelectedItem="{Binding SelectedCard}">
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="0,-6,0,12">
                                <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
                            </StackPanel>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>-->
                <Border BorderThickness="5" BorderBrush="#FFFF9F00"  Background="{StaticResource BackgroundColor}" Margin="10,10,10,24" >
                    <Grid >
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition Height="100"/>
                        </Grid.RowDefinitions>
                        <TextBlock  Text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." TextWrapping="Wrap"></TextBlock>
                        <Border Grid.Row="1"  Margin="5"  Width="150" Height="50"    Background="{StaticResource BorderColor}"  BorderThickness="0" CornerRadius="10" RenderTransformOrigin="0.5,0.5">
                            <Button Command="{Binding PlayCommand}" Content="PLAY!" HorizontalAlignment="Center"   VerticalAlignment="Center" Height="80" Width="150" BorderBrush="{StaticResource BorderColor}" Background="{StaticResource BorderColor}"></Button>

                        </Border>
                    </Grid>
                </Border>
            </phone:PanoramaItem>

            <!--Panorama item two-->
            <phone:PanoramaItem Header="Cards">
                <!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
                <phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="{Binding Cards}" SelectionChanged="CardList_SelectionChanged" >
                    <!--<phone:LongListSelector.ListHeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="12,0,0,38">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="Cards"
                                           Style="{StaticResource PanoramaItemHeaderTextStyle}"
                                           Grid.Row="0"/>
                            </Grid>
                        </DataTemplate>
                    </phone:LongListSelector.ListHeaderTemplate>-->
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="140" Width="432" >
                                <!--Replace rectangle with image-->
                                <Border BorderThickness="3" Width="140" Height="140" BorderBrush="{StaticResource BorderColor}" Background="{StaticResource BorderColor}" >
                                    <Image Source="{Binding PictureURL}"  Width="138" Height="138" Stretch="UniformToFill"/>
                                </Border>
                                <!--<Border Margin="8,0,0,0"  BorderThickness="3" Width="275" Height="140" BorderBrush="{StaticResource BorderColor}" Background="{StaticResource BackgroundColor}" >-->

                                    <StackPanel Width="311" >

                                        <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
                                        <TextBlock Text="{Binding Description}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource CardDescTextStyle}" />
                                        <toolkit:Rating ReadOnly="True" RatingItemCount="5" Value="{Binding Rate}"  Width="125" Height="25" Background="Transparent"/>

                                    </StackPanel>
                                <!--</Border>-->
                            </StackPanel>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </phone:PanoramaItem>

            <!--Panorama item three-->
            <phone:PanoramaItem Header="Decks" Orientation="Horizontal">
                <!--Double wide Panorama with large image placeholders-->
                <!--<Grid>
                    <StackPanel Margin="0,4,16,0" Orientation="Vertical" VerticalAlignment="Top">
                        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                            <Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
                        </StackPanel>
                        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="0,12,0,0">
                            <Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
                        </StackPanel>
                    </StackPanel>
                </Grid>-->

                <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">




                    <ListBox  ItemsSource="{Binding Decks}" SelectedItem="{Binding SelectedDeck, Mode=TwoWay}">
                            <ListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                <toolkit:WrapPanel ItemHeight="160" ItemWidth="160"  Width="700" />
                            </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                        
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                <Border BorderThickness="3" Width="150" Height="150" BorderBrush="{StaticResource BorderColor}" Background="{StaticResource BorderColor}">
                                        <Image Source="{Binding PictureURL}"  Width="148" Height="148" Stretch="UniformToFill" />
                                    </Border>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                   
                </Grid>
            </phone:PanoramaItem>
        </phone:Panorama>

        <!--Uncomment to see an alignment grid to help ensure your controls are
            aligned on common boundaries.  The image has a top margin of -32px to
            account for the System Tray. Set this to 0 (or remove the margin altogether)
            if the System Tray is hidden.

            Before shipping remove this XAML and the image itself.-->
        <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->

    </Grid>
</phone:PhoneApplicationPage>